<template>
  <div class="home">
    <div style="width:100%;min-height:calc(100% - 20px);">
      <div class="row1">
        <el-carousel trigger="click" :autoplay="false" style="width:60%;margin-right:2%">
          <el-carousel-item v-for="item in carouselImgUrl" :key="item">
            <el-image fit="scale-down" :src="item" :preview-src-list="carouselImgUrl" ></el-image>
          </el-carousel-item>
        </el-carousel>
        <el-card shadow="hover" style="width:40%;height: 40vh;">
          <div slot="header" class="titleStyle">决策算子</div>
          <span class="newContent" v-for="item in 5" :key="item">
            <el-image :src="require('../assets/newsdot.jpg')" style="pointer-events: none;user-select:none;margin-right:10px"></el-image>
            <el-link href="" target="_blank">{{'决策算子板块' + item}}</el-link>
          </span>
        </el-card>
      </div>
      <div class="row2">
        <el-tabs class="homeFunctionJump" type="border-card">
          <el-tab-pane label="业务系统">
            <div class="FunctionIconBox">
              <div 
                class="FunctionIcon"
                v-for="item in DataFusionLink" :key="item.name">
                <i style="font-size:38px;cursor:pointer;" @click="toDataFusion(item.path)" :class="item.icon"></i>
                <p style="font-size:10px;cursor:pointer;" @click="toDataFusion(item.path)">{{item.name}}</p>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="重点推荐">配置管理</el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script>
import Footer from '../components/footer.vue'
export default {
  data() {
    return {
      carouselImgUrl: [require('../assets/Menu_bg1.jpg'), require('../assets/r1.png'), require('../assets/r2.png')],
      DataFusionLink:[{
          path: '/aggregatePage/operator/direct',
          icon: 'el-icon-data-analysis',
          name: '直接集合',
        },{
          path: '/aggregatePage/operator/single',
          icon: 'el-icon-receiving',
          name: '单算子集合',
        },{
          path: '/aggregatePage/operator/multiple',
          icon: 'el-icon-guide',
          name: '多算子集合',
        },
      ],
    };
  },
  components:{
    Footer
  },
  methods: {
    toDataFusion(path){
      this.$router.push(path)
    },
  },
}
</script>

<style>
.home{
    width: 100%;
    height: 100%;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
.el-carousel__container{
  height: 40vh !important;
}
.el-card__header{
  padding: 9px 10px;
}
.el-card__body{
  padding: 5px;
}
.row1, .row2{
  display: flex;
  align-items: center;
}
.row2 {
  margin-top: 2vh;
  background:#f1f1f1;
  justify-content: space-between;
}
.titleStyle{
  font-size: 20px; 
  color: #00a6ac; 
  font-weight: 600;
  font-family: Microsoft YaHei,"微软雅黑", Arial, Helvetica, sans-serif;
}
.newContent{
  display: flex;
  align-items: center;
}
.homeFunctionJump{
  width: 100%;
  height: 300px;
}
.FunctionIconBox{
  display: flex;
  align-items: center;
}
.FunctionIcon{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 10%;
}
.FunctionIcon:hover{
  color: #50b7c1;
}
</style>